<template>
  <div>
    <el-page-header
      @back="goBack"
      content="订单详情"
      style="padding-bottom: 20px"
    >
    </el-page-header>
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%; height: 100%">
        <template
          ><div slot="empty">
            <img
              src="../../assets/img/empty.png"
              alt=""
              style="width: 80%"
            /></div
        ></template>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="name" label="菜名" width="240">
        </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>

        <el-table-column prop="num" label="数量/份" width="180" align="center">
        </el-table-column>

        <el-table-column prop="price" label="单价" width="120" align="center">
          <template slot-scope="scoped">
            <span>￥{{ scoped.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总价" align="center" width="120">
          <template slot-scope="scoped">
            <span style="color: red">
              ￥ {{ scoped.row.price * scoped.row.num }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="remark" label="操作" align="center">
          <el-button type="text" icon="el-icon-chat-dot-round">评论</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "香辣爆炒牛蛙",
          num: 1,
          price: 59,
          remark: "多点辣椒",
        },
        {
          name: "白切鸡",
          num: 1,
          price: 68,
          remark: "",
        },
       
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.tableBox {
  width: calc(100vw - 280px);
  height: 72vh;
}
</style>vh